{extends 'base/site2.html'}
{block name="page_header"}{include file="common/header.html" inline}{/block}
{block name="page_nav"}{include file="common/slide-nav.html" inline}{/block}
{block name="page_styles"}
<link rel="stylesheet" href="/css/common/swiper-bundle.min.css">
<style>
.session-main {
    font-size: 12px;
    overflow-y: visible;
}
.box-list{
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
}
.ds-al{
    display: flex;
    align-items: center;
}
.ds-jc{
    display: flex;
    justify-content: space-between;
}
.ds-ac-jc{
    display: flex;
    align-items: center;
    justify-content: center;
}
.select-mini{
    height: 25px;
}

.swiper-wrapper{
    padding: 0 60px;
}
:root {
    --swiper-theme-color: #3c5dbd;
}
.show-table .form-horizontal .form-group{
    margin-left:0;
    margin-right:0;
}
{* .col-md-12{
    padding: 0;
} *}

.switch-item{
    font-size:18px;
    position: relative;
    cursor: pointer;
    margin-right: 40px;
}
.switch-item:last-child{
    margin-right: 0;
}
.switch-item:hover{
    color: #3c5dbd;
}
.switch-item:hover span{
    background: #3c5dbd;
}
.switch-item span{
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 70px;
    height: 5px;
    background: transparent;
    transform: translate(-50%, 0);
}
.switch-item.active{
    color: #3c5dbd;
}
.switch-item.active span{
    background: #3c5dbd;
}

.case-info-list{
    float:left;
    width:48%;
    line-height: 30px;
}
.case-info-list:nth-child(2n+1){
    margin-right: 2%;
}
.phone-dropdown.dropdown-menu > li > a{
    padding: 6px 8px;
    line-height: normal;
}
.phone-dropdown.dropdown-menu{
    min-width: 110px;
    top: 23px;
    left: auto;
    right: 35px;
}
</style>
<style>
  .sv-timeline {
	margin: 1px 20px 0 140px;
	font-size:14px;
	list-style:none;
}
.sv-timeline-item {
	position:relative;
	padding-bottom:26px;
}
.sv-timeline-item__tail {
	position:absolute;
	left:5px;
    border-left:2px solid rgb(11,189,135);
	top:13px;
	bottom:0;
}
.sv-timeline-item__node--primary {
	background-color:#409eff;
}
.sv-timeline-item__node--large {
	left:-2px;
	width:14px;
	height:14px;
}
.sv-timeline-item__content {
	color:#303133;
}
.sv-timeline-item__timestamp.is-bottom {
	color:#666;
	font-size:14px;
	margin-right:15px;
	display:flex;
	align-items:center;
    position: absolute;
    left: -140px;
    top: 3px;
}
.sv-timeline-item__timestamp {
	color:#909399;
	line-height:1;
	font-size:13px;
}
.sv-timeline-item__wrapper {
	position:relative;
	padding-left:22px;
	top:-2px;
}
.sv-timeline-item__node--normal {
	left:-1px;
	width:12px;
	height:12px;
}
.sv-timeline-item__node {
	position:absolute;
	border:rgb(11,189,135) 1px solid;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.sv-timeline-item__node>div {
	width:8px;
	height:8px;
	background-color:rgb(11,189,135);
	border-radius:50%;
}
.sv-timeline-item__wrapper {
	display:flex;
}

.repayment-plan{
    width:100%;
}
.repayment-plan td{
    padding: 10px 0;
}
.repayment-plan th,.repayment-plan td{
    text-align: center;
}
</style>
{/block}

{block name="page_section"}
<div>
    <input type="hidden" name="caseId" value="{$smarty.get.caseId}">
    <input type="hidden" value="{$fieldType}" name="fieldType">
    <div class="row">
        <div class="col-md-12 box-list" style="padding-top:0;">
            <a href="javascript:;" onclick="history.go(-1)">
                <i class="glyphicon glyphicon-menu-left"></i>
                返回
            </a>
            <div class="col-md-3 ds-jc">
                <a href="javascript:;" data-fn="switch-page" data-type="prev" style="color:#333;">
                    <i class="glyphicon glyphicon-step-backward"></i>
                    上一条
                </a>
                <a href="javascript:;" data-fn="switch-page" data-type="next" style="color:#333;">
                    下一条
                    <i class="glyphicon glyphicon-step-forward"></i>
                </a>
            </div>
        </div>
        <div class="col-md-12" style="height:5px;background-color: #f5f5f5;"></div>
        <div class="col-md-12 box-list">
            <div class="ds-al">
                <div>
                    <div style="font-size:26px;font-weight:bold;min-width: 82px;text-align-last: justify;">{$case['litigantName']}</div>
                    <div class="ds-jc">
                        <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="right" title="案件调解结果">
                            {$mediateResult[$case['mediateResult']]}
                        </a>
                        <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="right" title="案件还款状态">
                            {$repayStatus[$case['repayStatus']]}
                        </a>
                    </div>
                </div>
                <div style="margin-left:70px;">
                    <div class="ds-al">
                        <span class="text-nowrap">用户标签：</span>
                        <select class="form-control select-mini" data-select="custom-select"  name="customLabel">
                            {foreach from=$customLabel key=key item=info}
                                <option {if $key == $case.customLabel}selected="selected"{/if} value="{$key}">{$info}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="ds-al" style="margin-top:5px;">
                        <span class="text-nowrap">用户等级：</span>
                        <select class="form-control select-mini" data-select="custom-select" name="customGrade">
                            {foreach from=$customGrade key=key item=info}
                                <option {if $key == $case.customGrade}selected="selected"{/if} value="{$key}">{$info}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
            </div>
            <div class="ds-al" data-ele="btn-box" style="margin-right: 50px;position: relative;">
                <div data-ele="phone-text-status"></div>
                <div class="callOutTimer" style="margin-left: 5px;font-size: 13px;"></div>
                <img data-fn="hangup" data-type="callOut" data-toggle="tooltip" data-placement="top" title="挂断" src="/images/call/u476.png" style=" width:40px;margin-left: 20px;display: none;cursor: pointer;">
                <img data-hover="call" data-toggle="tooltip" data-placement="top" title="" src="/images/call/u475.png" style=" width:40px;margin-left: 40px;cursor: pointer;">
                <ul class="dropdown-menu phone-dropdown">

                </ul>
            </div>
        </div>
        <div class="col-md-12" style="height:5px;background-color: #f5f5f5;"></div>
        <div class="col-md-12" >
            <div class="col-md-5" style="border-right: 10px solid #f5f5f5;height:calc(100vh - 183px);padding-left:10px;padding-right:15px;">
                <div class="ds-jc" style="padding:10px 0 0;">
                    <span>&nbsp;</span>
                    <div class="ds-al">
                        <div data-toggle="modal" data-target="#new-phone-dialog" style="position:relative;" title="添加号码">
                            <i class="glyphicon glyphicon-earphone" style="cursor: pointer;color:#3c5dbd;margin-left:10px;"></i>
                            <i class="glyphicon glyphicon-plus" style="cursor: pointer;color:#3c5dbd;position: absolute;left: 17px;top: -2px;transform: scale(.6);"></i>
                        </div>
                        <i class="glyphicon glyphicon-trash" data-fn="delect-phone" style="margin-left:30px;color:#3c5dbd;cursor: pointer;" title="删除号码"></i>
                    </div>
                </div>
                <div style="padding:0 0 10px;">
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper phone-wrapper text-nowrap">
                            
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
                <div style="display:flex;justify-content: center;padding: 15px 0 25px;border-top:1px solid #ccc;">
                    <span class="switch-item active">添加调解记录<span></span></span>
                    <span class="switch-item">添加还款记录<span></span></span>
                </div>
                <div>
                    <div class="show-table">
                        <form class="form-horizontal">
                            <input type="hidden" name="caseId" value="{$smarty.get.caseId}">
                            <input type="hidden" name="callId">
                            <input type="hidden" name="type">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label text-nowrap" style="text-align:left;">本次调解备注：</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" rows="3" name="desc"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label text-nowrap" style="text-align:left;">本次调解结果：</label>
                                <div class="col-sm-5">
                                    <select class="form-control select-mini" name="mediateResult">
                                        {foreach from=$mediateResult key=key item=info}
                                            <option value="{$key}">{$info}</option>
                                        {/foreach}
                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <input name="isSync" type="checkbox" id="dddddd" value="1" style="margin:0 5px 0 0;">
                                    <label for="dddddd" class="control-label text-nowrap">同步调解结果</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label text-nowrap" style="text-align:left;">计划联系时间：</label>
                                <div class="col-sm-9">
                                    <input type="datetime-local" class="form-control" name="nextTime">
                                </div>
                            </div>
                            <div class="form-group ds-ac-jc">
                                <span class="btn btn-primary" data-fn="addMediationLog">保存</span>
                                <button type="reset" class="btn btn-default" style="margin-left:40px;">清空</button>
                            </div>
                        </form>
                    </div>
                    <div class="show-table" style="display:none;">
                        <form class="form-horizontal">
                            <input type="hidden" name="caseId" value="{$smarty.get.caseId}">
                            <div class="form-group ds-jc main-plan-box">
                                <div class="col-sm-4">
                                    <input type="text" class="form-control select-mini" name="returnedMoney" placeholder="还款总额">
                                </div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control select-mini" name="repaymentPeriods" placeholder="还款期数">
                                </div>
                                <div class="col-sm-4">
                                    <select class="form-control select-mini selectpicker" name="returnedDay" title="每月还款日">
                                        <option value="1" selected>每月1日</option>
                                        <option value="2">每月2日</option>
                                        <option value="3">每月3日</option>
                                        <option value="4">每月4日</option>
                                        <option value="5">每月5日</option>
                                        <option value="6">每月6日</option>
                                        <option value="7">每月7日</option>
                                        <option value="8">每月8日</option>
                                        <option value="9">每月9日</option>
                                        <option value="10">每月10日</option>
                                        <option value="11">每月11日</option>
                                        <option value="12">每月12日</option>
                                        <option value="13">每月13日</option>
                                        <option value="14">每月14日</option>
                                        <option value="15">每月15日</option>
                                        <option value="16">每月16日</option>
                                        <option value="17">每月17日</option>
                                        <option value="18">每月18日</option>
                                        <option value="19">每月19日</option>
                                        <option value="20">每月20日</option>
                                        <option value="21">每月21日</option>
                                        <option value="22">每月22日</option>
                                        <option value="23">每月23日</option>
                                        <option value="24">每月24日</option>
                                        <option value="25">每月25日</option>
                                        <option value="26">每月26日</option>
                                        <option value="27">每月27日</option>
                                        <option value="28">每月28日</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group ds-ac-jc">
                                <span class="btn btn-primary" data-fn="add-plan">生成还款计划</span>
                            </div>
                            <div class="form-group plan-box" style="margin-top:30px;height: 162px;overflow-y:scroll;">
                                
                            </div>
                            <div class="form-group ds-ac-jc" style="padding-bottom:20px;">
                                <span class="btn btn-primary" data-fn="save-plan">保存</span>
                                <button type="reset" class="btn btn-default" data-fn="clear-plan" style="margin-left:40px;">清空</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-7 box-list" style="display:block;">
                <div style="display:flex;justify-content: center;padding: 15px 0 5px;border-bottom:1px solid #ccc;margin-bottom:20px;">
                    <span class="switch-item active">案件信息<span></span></span>
                    <span class="switch-item" data-type="mediationLog">调解历史<span></span></span>
                    <span class="switch-item" data-type="sMSLog">短信记录<span></span></span>
                    <span class="switch-item" data-type="operateLog">操作日志<span></span></span>
                    <span class="switch-item" data-type="returnedPlan">还款计划<span></span></span>
                </div>
                <div style="height:calc(100vh - 275px);overflow-y:scroll;">
                    <div class="show-table">
                        <div class="clerfix">
                            {foreach from=$showFields key=key item=filed}
                                <div class="case-info-list" >{$key}：{$filed}</div>
                            {/foreach}
                        </div>
                    </div>
                    <div class="show-table" style="display:none;">
                        <ul class="sv-timeline getMediationLog">
                            
                        </ul>
                    </div>
                    <div class="show-table" style="display:none;">
                        <ul class="sv-timeline getSMSLog">

                        </ul>
                    </div>
                    <div class="show-table" style="display:none;">
                        <ul class="sv-timeline getOperateLog">
                            
                        </ul>
                    </div>
                    <div class="show-table" style="display:none;">
                        <table class="repayment-plan">
                            <thead>
                                <tr>
                                    <th>期数</th>
                                    <th>还款日期</th>
                                    <th>还款金额（元）</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody class="getReturnedPlan">
                            
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="new-phone-dialog" tabindex="-1" role="dialog" aria-labelledby="refusal_modal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">添加电话</h4>
            </div>
            <div class="modal-body">
                <div class="form-group clearfix ui-select">
                    <label for="exampleInputName2"  class="col-sm-4 control-label">电话：</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" data-value="new-phone" placeholder="请输入">
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-fn="add-phone">确定</button>
            </div>
        </div>
    </div>
</div>

<script type="text/template" id="phoneTpl">
    <% for(var i = 0 ;i < data.length;i++){ %>
        <div class="swiper-slide">
            <div class="ds-al" style="margin:5px 0 0 20px;">
                电话：<%=data[i].enTelephone%>
                <i data-fn="callout" data-telephone="<%=data[i].telephone%>" data-mobileId="<%=data[i].mobileId%>" class="glyphicon glyphicon-earphone" style="cursor: pointer;color:#3c5dbd;margin-left:10px;font-size:20px;"></i>
            </div>
            <div class="ds-al" style="margin:5px 0 0 20px;">来源：<%=data[i].mobileSource%></div>
            <div class="ds-al" style="margin:5px 0 0 20px;">状态：
                <select class="form-control select-mini" data-select="phone-update" data-mobileId="<%=data[i].mobileId%>" style="width:auto;">
                    <option value="1" 
                        <% if(data[i].mobileStatus == '1'){ %>
                            selected
                        <% } %>
                    >正常</option>
                    <option value="2"
                        <% if(data[i].mobileStatus == '2'){ %>
                            selected
                        <% } %>
                    >空号</option>
                    <option value="3"
                        <% if(data[i].mobileStatus == '3'){ %>
                            selected
                        <% } %>
                    >停机</option>
                    <option value="4"
                        <% if(data[i].mobileStatus == '4'){ %>
                            selected
                        <% } %>
                    >非本人</option>
                </select>
            </div>
        </div>
    <% } %>
</script>
<script type="text/template" id="phoneTpl2">
    <% for(var i = 0 ;i < data.length;i++){ %>
        <% if(data[i].isShow == 1){ %>
            <li><a data-fn="hover-call" data-telephone="<%=data[i].telephone%>"><%=data[i].enTelephone%></a></li>
        <% } %>
    <% } %>
</script>
{/block}
{block name="page_scripts"}
    <script src="/js/module/swiper-bundle.min.js"></script>
    <script type="text/javascript" src="/js/mediation/mediate/detail.min.js" init="mediation/mediate/detail"></script>
{/block}
